<template>
  <div>
    <Header></Header>
    <!--main开始-->
    <div class="mainBox w1200 bc mt20 clearfix">
      <userSideMenu :flag="'active'"></userSideMenu>
      <div class="mainRight fr w930">
        <!--收藏的游记-->
        <div class="br2 bg100 pb60">
          <!--title-->
          <h1 class="h60 bb90  c60 clearfix ">
            <a :class="(tagIndex===0)?'ml25 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom curborder_grn_bottom':'ml25 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom'"
               href="javascript:void(0);" @click="getMyCreateActive">我创建的活动</a>
            <a :class="(tagIndex===1)?'fl h60 f18 fm-yahei  lh60  c60  ml80 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60  c60  ml80 hoverborder_grn_bottom'" href="javascript:void(0);" @click="getMyJoinActive">我加入的活动</a>
          </h1>
          <!--list-->
          <ul class="w880 pl25 pr25  c60 f12 lh18 fm-yahei  pointer">
            <ActivityItem v-for="active in activityList" :active = "active"></ActivityItem>
            <li class="tc c60 f12 lh60 mt5">
              <a class="c60 hoverfont_unl" href="javascript:void(0);" @click = "getMoreActive" ref="infoListBox">点击查看更多></a>
            </li>
          </ul>
        </div><!--热门活动结束-->

      </div><!--mainRight结束-->
    </div>
    <Footer></Footer>
    <loading v-show="loadState"></loading>
  </div>
  <!--main结束-->
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import ActivityItem from "../../components/activityItem";
  import Utils from "../../assets/Util";
  import loading from "../../components/loading";
  export default {
    name: "userActivity",
    components: {
      Header,
      Footer,
      userSideMenu,
      ActivityItem,
      loading
    },
    data(){
      return {
        loadState:true,
        activityList:[],
        tagIndex:0,
        getActiveData:{
          "type": 2,
          "userID": localStorage.getItem("uId"),
          "token": localStorage.getItem('token'),
          "pageIndex": 0,
          "pageSize": 5,
          "variety": 1
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getActivity();
    },
    methods:{
      // 请求活动列表
      getActivity(){
          let props = {
            url:"/Activity/GetList",
            data:this.getActiveData,
            sCallBack:res => {
              this.loadState = false;
              if(res.data.code === 1){
                if(res.data.data.length === 0){
                  if (this.getActiveData.pageIndex === 0){
                    this.$refs.infoListBox.innerText = "暂无数据"
                    return false;
                  }
                  this.$message.success("全部加载完毕");
                  return false;
                }else{
                  this.$refs.infoListBox.innerText = "点击加载更多"
                }
                this.activityList = this.activityList.concat(res.data.data);
              }else if(res.data.code === 4){
                this.refreshToken(this.getActivity);
              }else{
                this.$message.error("活动信息请求出错");
              }
            },
            eCallBack:err => {
              this.$message.error("活动请求失败");
              console.log(err);
            }
          }
          Utils.myRequest(props);
      },
      // 请求我创建的活动
      getMyCreateActive(){
          this.loadState = true;
          this.activityList = [];
          this.tagIndex = 0;
          this.getActiveData.pageIndex = 0;
          this.getActiveData.type = 2;
          this.getActivity();
      },
      // 请求我加入的活动
      getMyJoinActive(){
          this.loadState = true;
          this.activityList = [];
          this.tagIndex = 1;
          this.getActiveData.pageIndex = 0;
          this.getActiveData.type = 3;
          this.getActivity();
      },
      getMoreActive(){
        this.loadState = true;
        this.getActiveData.pageIndex += 1;
        this.getActivity();
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      }
    }

  }
</script>

<style scoped>

</style>
